<template>
    <view>
        <video id="myVideo" :src="videoUrl" controls style="width:100%;height:500px;" object-fit="fill" 
		@timeupdate="getTime" :danmu-list="danmuList" :danmu-btn="true" @click="play()"></video>
        <input type="text" placeholder="请输入弹幕内容" v-model="danmuValue">
        <button @click="sendDanmu()">发送弹幕</button>
        <button @click="goTime()">前进15秒</button>
        <button @click="backTime()">后退15秒</button>
    </view>
</template>

<script>
    export default {
        name: "video-component",
        data(){
            return {
				networkType:"",//网络类型
                videoUrl:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
                currentTime:"00:00",
                duration:"00:00",
                danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                    {
                        text: '第 3s 出现的弹幕',
                        color: '#ff00ff',
                        time: 3
                    }
                ],
                danmuValue:"",
				touchNum:0
            }
        },
        onReady(){
            //创建视频组件控制实例
            this.videoContext = uni.createVideoContext('myVideo')
			uni.getNetworkType({
				success:(res)=>{
					
						if(res.networkType!="wifi"){
							this.videoContext.pause();
							uni.showToast({
								title:"当前非wifi网络",
								duration:2000
							})
						}
				}
			})
        },
        methods:{
            play(){
				this.touchNum ++
							setTimeout(()=>{
								if(this.touchNum == 1){
									console.log('单击')
									this.videoContext.play();
								}
								if(this.touchNum >= 2){
									console.log('双击')
									this.videoContext.pause();
								}
								this.touchNum = 0
							},250)
                
            },
            getTime(e){
                // console.log(e);
                this.currentTime=e.detail.currentTime;
                this.duration=e.detail.duration;
            },
            goTime(){
                this.videoContext.seek(this.currentTime+15);
            },
            backTime(){
                this.videoContext.seek(this.currentTime-15);
            },
            //发送弹幕
            sendDanmu(){
                this.videoContext.sendDanmu({
                    text: this.danmuValue,
                    color: this.getRandomColor()
                })
            },
            getRandomColor() {
                const rgb = []
                for (let i = 0; i < 3; ++i) {
                    let color = Math.floor(Math.random() * 256).toString(16)
                    color = color.length == 1 ? '0' + color : color
                    rgb.push(color)
                }
                console.log('#' + rgb.join(''));
                return '#' + rgb.join('')
            }
        },

    }
</script>

<style>
video{
	width: 100%;
	height:500rpx;
}
button{
	width: 180rpx;
	height:60rpx;
	font-size: 28rpx;
}
</style>

